
document.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.justtext-html-m').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/animate/loading/text.js" type="module" defer></script>
<al-text></al-text>
<al-text text="加载中"></al-text>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.al-circle-html-m').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/animate/loading/circle.js" type="module" defer></script>
<al-circle></al-circle>
<al-circle type="groove"></al-circle>
<al-circle color="#0095ff"></al-circle>
<al-circle color="#0095ff" type="groove"></al-circle>
<al-circle type="step"></al-circle>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.al-greytrans-html-m').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/animate/loading/greytrans.js" type="module" defer></script>
<al-greytrans src="../statics/img/avatar/1.png" opacity=".1"></al-greytrans>
<al-greytrans src="../statics/img/avatar/1.png"></al-greytrans>
<al-greytrans src="../statics/img/avatar/1.png" opacity=".1" grayscale=".5"></al-greytrans>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.al-doublebead-html-m').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/animate/loading/doublebead.js" type="module" defer></script>
<al-doublebead></al-doublebead>
<al-doublebead color="blue,red"></al-doublebead>
<al-doublebead color="#999,#999"></al-doublebead>`,
    {language: 'xml'}
  ).value;

  
  document.querySelector('.al-soundleap-html-m').innerHTML = hljs.highlight(`<script src="http://zx4.com:8001/kits/webcomponents/animate/loading/soundleap.js" type="module" defer></script>
<al-soundleap></al-soundleap>
<al-soundleap color="#0095ff"></al-soundleap>`,
    {language: 'xml'}
  ).value;

  document.querySelector('.al-more-html').innerHTML = hljs.highlight(`<div style="line-height:1;">
  <al-text style="font-size:12px"></al-text>
  <span style="font-size:18px">
    <al-text></al-text>
  </span>

  <al-circle type="groove"></al-circle>
  <span style="font-size:20px">
    <al-circle type="groove"></al-circle>
  </span>

  <al-doublebead></al-doublebead>
  <span style="font-size:30px">
    <al-doublebead></al-doublebead>
  </span>
</div>`,
    {language: 'xml'}
  ).value;
});
